<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>点击按钮后，修改网页内容和效果</title>
</head>
<body>
<h1 id="poem_title">登岳阳楼</h1>
<h5>唐代：杜甫</h5>
<p>昔闻洞庭水，今上岳阳楼。</p>
<p>吴楚东南坼，乾坤日夜浮。</p>
<p>亲朋无一字，老病有孤舟。</p>
<p>戎马关山北，凭轩涕泗流。</p>
<button id="btn1">修改标题按钮</button>
<button id="btn2" onclick="alterAuthor()">修改作者</button>
<button id="btn3" onclick="print()">控制台打印诗歌正文</button>
<script>
    //绑定btn1的点击事件，点击后触发alterTitle函数
    document.querySelector('#btn1').addEventListener('click',alterTitle)
    function alterTitle() {
        document.querySelector('#poem_title').style.color='red'
    }
    function alterAuthor() {
        document.querySelector('h5').innerHTML='杜甫'
    }
    function print() {
        //获取所有p标签，故使用 document.querySelectorAll，返回一个doms数组对象
        doms = document.querySelectorAll("p");
        //遍历这个对象，这里我使用了一个匿名函数
        doms.forEach(function (dom,index) {
            //这里的dom是值数组元素中的值，例如doms[0] ，
            // 这里只是一个循环的修改[]中的键
            //相当于doms[键]等于dom一样
            console.log(dom.innerHTML)
        })
    }
</script>
</body>
</html>